<template>
    <div class="content">
      <el-dialog :title="title" :visible.sync="Visible" width="70%" :before-close="close" :rules="rules" :close-on-click-modal="false">
        <!-- 内容区域 -->
        <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm" :hide-required-asterisk="true">
          <el-form-item label="标签类型" prop="type">
            <el-select v-model="Form.type" placeholder="请选择">
              <el-option v-for="item in Catalogs" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="name">
            <el-input v-model="Form.name"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="Form" :rules="rules" label-width="100px" class="aboutForm" :hide-required-asterisk="true">
          <el-form-item label="关联标签">
            <el-input v-model="this.about" placeholder="查询已知的标签"></el-input>
          </el-form-item>
          <el-button style="margin-left: 100px;"  type="success" @click="addLabel(baseForm.type)">添加</el-button>
          <el-button type="info" @click="fasAdd">快速创建</el-button>
          <div class="list">
            主体名称
            <ul class="text">
              <li v-for="item,index in this.Form.nameList" :key="index" class="itemlist">
                <span class="name">{{item.name}}</span>
                <i class="el-icon-close" @click="delList(index,'name')"></i>
              </li>
            </ul>
          </div>
          <div class="list">
            时间
            <ul class="text">
              <li v-for="item,index in this.Form.timeList" :key="index" class="itemlist">
                <span class="time">{{item.name}}</span>
                <i class="el-icon-close" @click="delList(index,'time')"></i>
              </li>
            </ul>
          </div>
          <div class="list">
            地点
            <ul class="text">
              <li v-for="item,index in this.Form.addressList" :key="index" class="itemlist">
                <span class="address">{{item.name}}</span>
                <i class="el-icon-close" @click="delList(index,'address')"></i>
              </li>
            </ul>
          </div>
          <div class="list">
            事件
            <ul class="text">
              <li v-for="item,index in this.Form.evenList" :key="index" class="itemlist">
                <span class="even">{{item.name}}</span>
                <i class="el-icon-close" @click="delList(index,'even')"></i>
              </li>
            </ul>
          </div>
        </el-form>
        <el-form :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标签图片" prop="image">
            <Uploader :fileList="fileList" />
          </el-form-item>
        </el-form>
        <!-- 弹框底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="close" icon="el-icon-close">关闭</el-button>
          <el-button type="primary" @click="submit" icon="el-icon-document-checked">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
      
<script>
import Uploader from './Uploader.vue';
export default {
  //  接收父组件的值
  props: {
    title: {
      type: String,
      default: "新建标签",
    },
    fileList: {
      type: Array,
      defalut: function () {
        return []
      }
    }
  },
  components:{
    Uploader
  },
  data() {
    return {
      Visible: false, //外弹框
      about:'',             //关联标签
      obj:{},               //用于储存添加的内容
      //    表单基本数据
      Form: {
        name: "", //标签名称
        type: '', //标签类型
        time:'',  //创建时间
        image:'', //标签图片
        nameList:[],  //主体名称列表
        timeList:[],  //时间列表
        addressList:[], //地点列表
        evenList:[],  //事件列表
      },
      // 标签类型
      Catalogs: [
        {
          label: '名称',
          value: 'name'
        },
        {
          label: '时间',
          value: 'time'
        },
        {
          label: '地点',
          value: 'place'
        },
        {
          label: '事件',
          value: 'event'
        },
      ],
      // 校验规则
      rules: {
        name: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择标签类型', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    // 获取当前时间
    getTime(){
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      var dateArr = [date.getMonth() + 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()];
      for(var i=0;i<dateArr.length;i++){
        if (dateArr[i] >= 1 && dateArr[i] <= 9) { 
            dateArr[i] = "0" + dateArr[i];
        }
      }
      this.baseForm.time = year+'/'+dateArr[0]+'/'+dateArr[1]+' '+dateArr[2]+':'+dateArr[3]+':'+dateArr[4];
    },
    /**
     * 添加表单数据
     */
    submit() {
      console.log("获取输入的信息", this.Form,);
      // 检验表单是否通过
      this.$refs.Form.validate((valid) => {
          if (valid) {
            if(this.title == '新建标签'){this.getTime()}
            // 自定义事件,通知父组件Area进行添加表单
            this.$emit('addList',this.baseForm)
            // 清空表单数据
            this.clearForm()
          } else {
            return false;
          }
        });
      
    },
    /**
     * 清空表单数据列表
     */
    close() {
      let that=this;
      that.Visible = false; //1.关闭弹框
      // 自己手动初始化Form,address
      that.Form = {
        name: '',
        type: '',
        time:'',
        image:'',
      };
     },
    // 快速创建事件
    fasAdd(){

    },
    // 标签列表的元素添加事件
    addLabel(val){
      console.log('addLabel---------',val);
      this.obj = {}
      if(val == 1){
        this.obj.name = this.baseForm.name
        this.baseForm.nameList.push(this.obj)
        console.log('val=1--------',this.nameList);
      }else if(val == 2){
        this.obj.name = this.baseForm.name
        this.baseForm.timeList.push(this.obj)
      }else if(val == 3){
        this.obj.name = this.baseForm.name
        this.baseForm.addressList.push(this.obj)
      }else if(val == 4){
        this.obj.name = this.baseForm.name
        this.baseForm.evenList.push(this.obj)
      }
    },
    // 标签列表的元素删除事件
    delList(val,name){
      console.log('del------',val,name);
      if(name == 'name'){
        this.baseForm.nameList.splice(val,1)
      }else if(name == 'time'){
        this.baseForm.timeList.splice(val,1)
      }else if(name == 'address'){
        this.baseForm.addressList.splice(val,1)
      }else if(name == 'even'){
        this.baseForm.evenList.splice(val,1)
      }
    }
  },
};
</script>
      
<style lang="less" scoped>
::v-deep .el-dialog>.el-dialog__body{
    height: 50vh;
    overflow: auto;
  }
    .aboutForm {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #a7aeaf;
      border-radius: 20px;
      padding: 15px 0px;
      margin-bottom: 20px;
      .el-form {
        display: flex;
      }
      .el-form-item {
        width: 50%;
      }
      .el-button{
        height: 40px;
      }
      .list{
        width: 23%;
        height: 160px;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 5px 10px;
        .text{
          width: 100%;
          height: 95%;
          border: 1px solid #a7aeaf;
          border-radius: 8px;
          margin-top: 10px;
          overflow: auto;
        }
        .itemlist{
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 5px 0;
          span{
            width: 80px;
            height: 25px;
            line-height: 25px;
            border-radius: 8px;
          }
          .name{
              background: rgb(68, 114, 196);
              color: #fff;
            }
            .time{
              background: rgb(112, 48, 160);
              color: #fff;
            }
            .address{
              background: rgb(197, 90, 17);
              color: #fff;
            }
            .even{
              background: rgb(112, 173, 71);
              color: #fff;
            }
          i{
            color: red;
            font-size: 20px;
          }
        }
      }
    }
  .demo-ruleForm {
         display: flex;
         flex-wrap: wrap;
         .el-form {
           display: flex;
         }
         .el-form-item {
           width: 50%;
         }
         .el-select {
           width: 100% !important;
         }
       }
    
  .form_position {
    // float: left;
   .el-input {
     width: 33%;
     float: left;
   }
  }
  ::v-deep .el-form-item__label{
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          padding: 0 0 0 5px;
       }
    ::v-deep ::-webkit-scrollbar  
  {  
      width: 10px !important;  
      height: 0;
  }
    
  /*定义滚动条轨道 内阴影+圆角*/  
  ::v-deep ::-webkit-scrollbar-track  
  {  
      border-radius: 2.5px;
    // 设置滚动条滑块样式
      background-color: #e2dfdf !important;
  } 
    
  /*定义滑块 内阴影+圆角*/  
  ::v-deep ::-webkit-scrollbar-thumb  
  {  
      background: #6a6e6f !important;
      border-radius: 2.5px;
  }
</style>